<template>
	<page-navbar title="User" :autoBack="false" :isLeft="false"></page-navbar>
	<view class="container">
		<view class="header">
			<image class="user_head" src="@/static/images/user/head.png" mode=""></image>
			<view class="user_r">
				<view class="user_name">Andrea Hirata</view>
				<view class="email">hirata@gmail.com</view>
			</view>
		</view>
		<view class="content_list">
			<view class="c_item" v-for="(i, n) in list">
				<view class="tag">{{ i.title }}</view>
				<view class="menu" v-for="(g, h) in i.menu" :key="h" @click="clickMenu(g)">{{ g.name }}</view>
			</view>
		</view>
	</view>
	
	<tabbar :current='3'></tabbar>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const list = reactive([
	{
		title: 'General',
		menu: [
			{
				name: 'Edit Profile',
				url: '/pages/user/withdraw'
			},
			{
				name: 'Notifications',
				url: '/pages/user/wallet'
			},
			{
				name: 'Wishlist',
				url: '/pages/home/invite'
			}
		]
	},
	{
		title: 'Legal',
		menu: [
			{
				name: 'Terms of Use',
				url: '/pages/login/login'
			},
			{
				name: 'Privacy Policy',
				url: ''
			}
		]
	},
	{
		title: 'Personal',
		menu: [
			{
				name: 'Report a Bug',
				url: ''
			},
			{
				name: 'Logout',
				url: ''
			}
		]
	}
]);

onLoad(() => {
	uni.hideTabBar({
		animation: false
	});
});

onMounted(() => {});

const clickMenu = (item) => {
	uni.$u.toast('点击了>>>' + item.name);
	if (!item.url) return;
	uni.navigateTo({
		url: item.url
	});
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	width: 100vw;
	overflow: hidden;
	letter-spacing: 0.4px;
	padding-bottom: 44rpx;
	.header {
		padding: 0 48rpx;
		margin-top: 96rpx;
		display: flex;
		align-items: center;
		padding-bottom: 70rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
		.user_head {
			height: 150rpx;
			width: 150rpx;
			display: block;
			border-radius: 75rpx;
			margin-right: 52rpx;
		}
		.user_r {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.user_name {
				font-size: 32rpx;
				line-height: 44rpx;
			}
			.email {
				margin-top: 14rpx;
				color: #7f7f7f;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	.content_list {
		.c_item {
			.tag {
				height: 120rpx;
				padding: 0 48rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #7f7f7f;
				display: flex;
				align-items: center;
			}
			.menu {
				height: 104rpx;
				padding: 0 48rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
				box-sizing: border-box;
			}
		}
	}
}
</style>
